---
title: "Accessibility Checker Rule Help: HAAC_ActiveDescendantCheck"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### Who does this affect?

* Blind people using screen readers
* People with low vision using screen readers

### Why is this important?

In a composite component where the child elements are not normally able to take keyboard focus, the `aria-activedescendant` attribute can be used to identify the child element that currently has focus. This enables proper keyboard control of the component, and allows assistive technologies to gather information about the component and its state.

</Column>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

<div id="locLevel"></div>

### The `aria-activedescendant` property of the component does not reference the `id` of a valid child element.
The `aria-activedescendant` property must reference the `id` of a non-empty, non-hidden active child element.

[IBM 4.1.2 Name, Role, Value](http://www.ibm.com/able/guidelines/ci162/name_role_value.html) | [WAI-ARIA v1.2: Managing Focus in Composites Using aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.2/#kbd_focus_activedescendant)


<div id="locSnippet"></div>

### What to do

* Verify that the `aria-activedescendant` attribute value is the `id` of the currently active child element;
* AND, verify that the child element is not hidden;
* AND, verify that the child element is either a descendant of this element, or is owned by this element (indicated by using the aria-owns attribute on this element).

The following example* shows a radio group using `aria-activedescendant` to indicate the active radio button, which is coded as a DOM descendant:

<CodeSnippet type="multi" light={true}> 
   &lt;h3 id="group_label_1"&gt;Pizza Crust&lt;/h3&gt;
   &lt;ul id="rg1" class="radiogroup" role="radiogroup" aria-labelledby="group_label_1" aria-activedescendant="rb11" tabindex="0"&gt;
     &lt;li id="rb11" role="radio" aria-checked="false"&gt;Regular crust&lt;/li&gt;
     &lt;li id="rb12" role="radio" aria-checked="false"&gt;Deep dish&lt;/li&gt;
     &lt;li id="rb13" role="radio" aria-checked="false"&gt;Thin crust&lt;/li&gt;
   &lt;/ul&gt; 
   </CodeSnippet> 
   
* Example code includes material copied from or derived from ARIA 1.2 Practices - Radio Group Example Using aria-activedescendant. Copyright © 2018-2019 W3C® (MIT, ERCIM, Keio, Beihang).


</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
